import React from 'react'
import { connect } from 'react-redux'
import Icon, { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
import { toggleSiderBar } from '@/store/actions'
import './index.less'

const Hamburger = (props) => {
  const { sidebarCollapsed, toggleSiderBar } = props
  const svgCom = sidebarCollapsed ? MenuUnfoldOutlined : MenuFoldOutlined
  return (
    <div className="hamburger-container">
      <Icon
        component={svgCom}
        onClick={toggleSiderBar}
      />
    </div>
  )
}

export default connect((state) => state.app, { toggleSiderBar })(Hamburger)
